<template>
	<main class="homebox">
		<div class="okrbox">
			<div>
				<p class="okrtext">OKR情况</p>
				<div class="okrtu">
					<div class="okrsbox okrsbox1">
						<div class="sbox sbox1">本周任务</div>
					</div>
					<div class="okrsbox okrsbox2">
						<div class="sbox sbox2">OKR核心</div>
					</div>
					<div class="okrsbox okrsbox3">
						<div class="sbox sbox3">项目任务</div>
					</div>
					<div class="okrsbox okrsbox4">
						<div class="sbox sbox4">当前进展</div>
					</div>
				</div>
			</div>
			<div class="raderbox">
				<p class="pertext">个人雷达图</p>
				<div class="radertu">
					<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
				</div>
			</div>
		</div>
		
		<div class="groupbox">
			<p class="okrtext">小组任务分成度</p>
			<div class="pietu">
				<chart ref="chart1" :options="orgOptions2" :auto-resize="true"></chart>
			</div>	
			<p class="okrtext">个人能力图</p>
			<div class="categorytu">
				<chart ref="chart1" :options="orgOptions3" :auto-resize="true"></chart>
			</div>
		</div>
		
		<div class="signbox">
			<div class="activebox">
				<p class="acttext">活动列表</p>
				<div class="line"></div>
				<div class="actcontent">
					<el-carousel  indicator-position="outside">
					    <el-carousel-item v-for="(item,index) in active" >
				          	<p class="title">活动{{item.anumber}}</p>
				          	<div class="content">
				           		<p class="tt"><strong>活动主题：</strong>{{item.aname}}</p>
				           		<p class="tt"><strong>报名时间：</strong>{{item.signinguptime}}</p>
				           		<p class="tt"><strong>开始时间：</strong>{{item.starttime}}</p>
				           		<p class="tt"><strong>人数限定：</strong>{{item.numberperson}}</p>
				           		<p class="tt1">查看详情</p>
				          	</div>
				         </el-carousel-item>
				    </el-carousel>
				</div>
			</div>
			<div class="timebox">
				<el-calendar v-model="value">
				</el-calendar>
			</div>
			
		</div>
	</main>
</template>

<script>
	import echarts from 'echarts'
	export default {
		data() {
	      return {
	      	orgOptions: {},
	      	orgOptions2: {},
	      	orgOptions3:{},
//	      	data:genData(50),
	        value: new Date(),
	        active:[
	        {
	        	anumber:"一",
	        	aname:"大神技术分享会",
	        	signinguptime:"2019.09.02-2019.09.05",
				starttime:"2019.09.06 15:30",
				numberperson:"30人"
	        	
	        },
	        {
	        	anumber:"二",
	        	aname:"大神技术分享会",
	        	signinguptime:"2019.09.02-2019.09.05",
				starttime:"2019.09.06 15:30",
				numberperson:"30人"
	        	
	        },
	        {
	        	anumber:"三",
	        	aname:"大神技术分享会",
	        	signinguptime:"2019.09.02-2019.09.05",
				starttime:"2019.09.06 15:30",
				numberperson:"30人"
	        	
	        },
	        {
	        	anumber:"四",
	        	aname:"大神技术分享会",
	        	signinguptime:"2019.09.02-2019.09.05",
				starttime:"2019.09.06 15:30",
				numberperson:"30人"
	        	
	        }
	        ]
	      }
	   	},
		mounted(){
//			var _this=this;
//			this.$http.get('./data/active.json')
//			.then(function(res){
//				_this.active=res.data.active
//			})
//			.catch(()=>{
//		  	})
//		  	.then((f)=>{
//		  	});
		  	
		  	this.orgOptions2 = {
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius: '55%',
			            data:[
			                {value:235, name:'成员A'},
			                {value:274, name:'成员B'},
			                {value:310, name:'成员C'},
			                {value:335, name:'成员D'},
			                {value:400, name:'成员E'}
			            ]
			        }
			    ]
			};
			this.orgOptions3={
				xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [820, 932, 901, 934, 1290, 1330, 1320],
			        type: 'line'
			    }]
			};
		  	this.orgOptions = {
			    tooltip: {},
			    legend: {
			        data: ['预算分配', '实际开销']
			    },
			    radar: {
			        // shape: 'circle',
			        name: {
			            textStyle: {
			                color: '#999999',
			                backgroundColor: '#fff',
			                borderRadius: 1,
			                padding: [2, 3]
			           }
			        },
			        indicator: [
			           { name: '销售', max: 6000},
			           { name: '管理', max: 16000},
			           { name: '技术', max: 30000},
			           { name: '客服', max: 38000},
			           { name: '研发', max: 52000},
			           { name: '市场', max: 25000}
			        ]
			    },
			    series: [{
			        name: '预算 vs 开销（Budget vs spending）',
			        type: 'radar',
			        // areaStyle: {normal: {}},
			        data : [
			            {
			                value : [4300, 10000, 28000, 35000, 50000, 19000],
			                name : '预算分配（Allocated Budget）'
			            },
			             {
			                value : [5000, 14000, 28000, 31000, 42000, 21000],
			                name : '实际开销（Actual Spending）'
			            }
			        ]
			    }]
		    }
		   
		}
	
}	
</script>

<style scoped="scoped">
	.homebox{
		text-align: center;
		width: 1200px;
		height: 650px;
		display: flex;
		/*background: gainsboro;*/
	}
	.okrbox{
		width: 400px;
		height: 650px;
		/*background: green;*/
		
	}
	.groupbox{
		width: 400px;
		height: 650px;
		/*background: yellowgreen;*/
	}
	.signbox{
		width: 400px;
		height: 650px;
		/*background: red;*/
	}
	/*okr的样式*/
	.okrtext{
		font-size: 20px;
		height: 50px;
		line-height: 50px;
	}
	.okrtu{
		width: 220px;
		height: 220px;
		margin-left: 90px;
		margin-right: 90px;
		margin-top: 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap:wrap;
		margin-bottom: 30px;
		/*background: yellow;*/
	}
	.okrsbox{
		width: 110px;
		height: 110px;
		border: 1px solid #efefef;
		box-sizing: border-box;
	}
	.okrsbox1{
		border-top-color: white;
		border-left-color: white;
		
	}
	.okrsbox2{
		border-top-color: white;
		border-right-color: white;
	}
	.okrsbox3{
		border-bottom-color: white;
		border-left-color: white;
	}
	.okrsbox4{
		border-right-color: white;
		border-bottom-color: white;
	}
	.sbox{
		width: 70px;
		height: 70px;
		border: 1px solid gainsboro;
		margin: 0 auto;
		margin-top: 20px;
		line-height: 70px;
		box-shadow: 5px 2px 10px gainsboro;
		font-size: 14px;
		color: white;
	}
	.sbox1{
		background: #91c7ae;
		/*box-shadow: 5px 2px 10px gainsboro;*/
	}
	.sbox2{
		background: #c23531;
	}
	.sbox3{
		background: #2f4554;
	}
	.sbox4{
		background: #d48265;
	}
	
	/*个人雷达图样式*/
	.raderbox{
		/*background: yellow;*/
	}
	.pertext{
		font-size: 20px;
		height: 50px;
		line-height: 50px;
	}
	.radertu{
		width: 240px;
		height: 240px;
		/*background: blue;*/
		margin-left: 80px;
		margin-right: 80px;
		margin-top: 10px;
	}
	/*改雷达图的大小*/
	.echarts{
		width: 240px!important;
		height: 240px!important;
	}
	
	/*饼状图的样式*/
	.pietu{
		width: 250px;
		height: 250px;
		/*background: blue;*/
		margin-left: 75px;
		margin-right: 75px;
	}
	.pietu .echarts[data-v-590145cc]{
		width: 250px!important;
		height: 250px!important;
	}
	
	/*个人能力效力图*/
	.categorytu{
		width: 350px;
		height: 300px;
		/*background: blue;*/
		margin-left: 25px;
		margin-right: 25px;
	}
	.categorytu .echarts[data-v-590145cc]{
		width: 370px!important;
		height: 300px!important;
	}
	/*右边的日历样式*/
	.timebox{
		width: 350px;
		height: 326px;
		margin-left: 25px;
		margin-right: 25px;
		/*background: yellow;*/
	}
	/deep/ .el-calendar-table .el-calendar-day{
		padding: 5px;
    	height: 35px;
	}
	/deep/ .el-calendar__body{
		padding: 0px 10px 10px;
	}
	/*活动列表的样式*/
	.activebox{
		width: 350px;
		height: 300px;
		margin-left: 25px;
		margin-right: 25px;
		/*background: yellow;*/
		text-align: center;
	}
	.acttext{
		overflow: hidden;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
	}
	.line{
		border: 1px dashed gainsboro;
	}
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0;
	  }
	  
	  /deep/ .el-carousel__arrow--left {
	  	left: 0px;
	  }
	  /deep/ .el-carousel__arrow--right{
	  	right: 0px;
	  }
	  /deep/ .el-carousel__indicators--outside{
	  	display: none;
	  }
	  /deep/ .el-carousel__container{
	  	height:250px;
	  	/*background-image: url(../../assets/timg.jpg);*/
	  	/*background-size: 100% 100%;*/
	  }
	  .title{
	  	height: 50px;
	  	line-height: 50px;
	  }
	  .content{
	  	text-align: left;
	  	width: 300px;
	  	height: auto;
	  	background: white;
	  	margin-left: 25px;
	  	margin-right: 25px;
	  }
	  .tt{
	  	height: 30px;
	  	line-height: 30px;
	  }
	  .tt1{
	  	width: 80px;
	  	height: 30px;
	  	border: 1px solid gainsboro;
	  	/*padding: 5px 5px;*/
	  	line-height: 30px;
	  	text-align: center;
	  	margin: 0 auto;
	  	border-radius: 5rem;
	  	cursor: pointer;
	  	font-size: 15px;
	  }
</style>